<template>
  <div class="app-container customer-div">

      <div id="chart-div">
          <div class="tiaojian-div" style="padding-top:20px">
            <el-form :inline="true" :model="params" size="mini" label-width="120px" :rules="rules" ref="paramsForm">
                <el-form-item label="牌号：" prop="goodsKingId">
                  <el-select v-model="params.goodsKingId" class="input-width" style="width:195px" placeholder="请选择" clearable filterable>
                    <el-option :value="item.kingId" :label="item.goodsSn" :key="item.kingId" v-for="item in options"></el-option>
                  </el-select>
                 </el-form-item>
                <el-form-item label="供应商名称：">
                  <el-select
                          clearable
                          v-model="params.supplierId"
                          filterable
                          remote
                          reserve-keyword
                          placeholder="请输入关键词"
                          :remote-method="remoteMethod3"
                          :loading="loading3">
                    <el-option
                            v-for="item in supplierList2"
                            :key="item.supplierId"
                            :label="item.supplierName"
                            :value="item.supplierId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="询价时间：">
                <el-date-picker
                        v-model="params.inquiryDate"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
                <el-form-item>
                  <el-button
                          @click="handleSearchList2()"
                          type="primary">
                    查询
                  </el-button>
                </el-form-item>
            </el-form>
          </div>
          <el-row>
              <el-col :span="12"><div id="myChart" :style="{'height':'500px'}" v-loading="loadingChart"></div></el-col>
              <el-col :span="12"><div id="myChart1" :style="{'height':'500px'}" v-loading="loadingChart"></div></el-col>
          </el-row>


        </div>


      <!--数据列表-->
      <div class="table-container" style="margin-top:0">
          <el-table
                  v-loading="loading"
                  :data="list"
                  border
                  style="width: 100%; margin-top: 20px">
              <el-table-column
                      align="center"
                      label="询价时间"
                      width="120">
                  <template slot-scope="scope">
                      {{scope.row.inquiryTime}}
                  </template>
              </el-table-column>
              <el-table-column
                      label="供应商"
                      width="400">
                  <template slot-scope="scope">
                      <el-link @click="toDetail(scope.row)" type="primary">
                          {{scope.row.supplierName}}
                      </el-link>
                  </template>
              </el-table-column>
              <el-table-column
                      prop="supplierType"
                      label="类型"
                      align="center"
                      width="100">
              </el-table-column>
              <el-table-column
                      prop="goodsSn"
                      label="牌号"
                      align="center"
                      width="200">
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="goodsNum"
                      label="数量"
                      width="100">
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="goodsPrice"
                      label="散货单价"
                      width="100">
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="batchPrice"
                      label="整车单价"
                      width="100">
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="deliveryDate"
                      label="交货期"
                      width="100">
              </el-table-column>
              <el-table-column
                      align="center"
                      prop="deliveryArea"
                      label="交货地"
                      width="100">
              </el-table-column>
              <el-table-column
                      label="备注"
                      width="400">
                  <template slot-scope="scope">
                      {{scope.row.remark}}
                  </template>
              </el-table-column>
              <el-table-column
                      label="创建人"
                      width="100"
                      align="center">
                  <template slot-scope="scope">
                      {{scope.row.createUserName}}
                  </template>
              </el-table-column>
          </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="params2.pageNum"
                :page-size="params2.pageSize"
                :page-sizes="[10,15,20]"
                :total="count">
        </el-pagination>
      </div>




  </div>
</template>

<script>
    import {goodsList,supplierListApi,inquiryReport,supplierInquiryList} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    import {validateCommission} from '@/utils/validate';

    export default {
        name: "goodsAnalysis",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                params:{
                  inquiryDate:'',
                  goodsKingId:'',
                  supplierId:'',
                },
                list:[],
                count:0,
                loading:false,
                chartW:0,
                loadingChart:false,
                options:[],
                params2:{
                  pageNum:1,
                  pageSize:10,
                  inquiryDate:'',
                  goodsKingId:'',
                  supplierId:'',
                  tab:'all'
                },
                rules:{
                  goodsKingId :[{required: true, trigger: 'change' ,message: '请选择商品',}],
                },
              supplierList2:[],
              loading3:false,
            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),
        },
        created() {
          this.getGoodsList();
          setTimeout(()=>{
            this.chartW = $("#chart-div").width();
          },300);
        },
        filters: {
            formatTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd')
            },
        },
        methods:{
            //去详情页
            toDetail(item){
                let routeData = this.$router.resolve({name:'supplierInfo',query:{id:item.supplierId}});
                window.open(routeData.href);
            },
          //获取供应商列表
          remoteMethod3(query) {
            if(query && query!= ''){
              this.loading3 = true;
              //获取供应产列表
              supplierListApi({tab:'all',supplierName:query,pageNum:1,pageSize:1000}).then(response => {
                this.supplierList2 = response.list;
                this.loading3 = false;
              }).catch(()=>{
                this.loading3 = false;
              });
            }
          },

          //获取商品列表
            getGoodsList(){
                goodsList().then((res)=>{
                    this.options = res.list;
                })
            },


            //获取图表数据
            getGoodsReport(){
                this.loadingChart = true;
                inquiryReport(this.params).then((res)=>{
                        let x1 = [];let y1 = []; let x2 = [];let y2 = [];
                        res.batchPriceList.forEach((el)=>{
                            x2.push(el.inquiryDate);
                            y2.push(el.batchPrice);
                        });
                        res.goodsPriceList.forEach((el)=>{
                            x1.push(el.inquiryDate);
                            y1.push(el.goodsPrice);
                        });
                        setTimeout(()=>{
                            document.getElementById('myChart').removeAttribute('_echarts_instance_');
                            this.drawCaiGouCount(x1,y1);
                            this.drawCaiGouCount2(x2,y2)
                        },600)

                })
            },
          //画图表-散货均价
          drawCaiGouCount(inquiryDate,goodsPrice){
              let myChart = this.$echarts.init(document.getElementById('myChart'));
              let arr = JSON.parse(JSON.stringify(goodsPrice));
              if(arr.length > 1){
                  arr.sort(function (a, b) {
                      return a-b;
                  });
              }
              let min = parseFloat(arr[0]);
              let max = parseFloat(arr[arr.length - 1]);
              let i = Math.ceil((max - min)/8);
              if(i== 0){
                  i = 8
              }
              min = (min-i).toFixed(0);
              max = (max+i).toFixed(0);
              if(min<0){
                  min = 0;
              }
            // 绘制图表
            myChart.setOption({
              dataZoom: [{
                show: true,
              }, {
                type: 'inside'
              }],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                data: ['散货均价']
              },
              xAxis: [
                {
                  type: 'category',
                  data: inquiryDate,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '散货均价',
                  axisLabel: {
                    formatter: '￥{value}'
                  },
                min:min,
                max:max,
                splitNumber:8,
                },
              ],
              series: [
                {
                  name: '散货均价',
                  type: 'line',
                  smooth: true,
                  symbolSize: 10,   //设定实心点的大小
                  data: goodsPrice,
                },
              ]
            });
            this.loadingChart = false;
          },
            //画图表-整车均价
            drawCaiGouCount2(inquiryDate,batchPrice){
                let myChart = this.$echarts.init(document.getElementById('myChart1'));
                let arr = JSON.parse(JSON.stringify(batchPrice));
                if(arr.length > 1){
                    arr.sort(function (a, b) {
                        return a-b;
                    });
                }
                let min = parseFloat(arr[0]);
                let max = parseFloat(arr[arr.length - 1]);
                let i = Math.ceil((max - min)/8);
                if(i== 0){
                    i = 8
                }
                min = (min-i).toFixed(0);
                max = (max+i).toFixed(0);
                if(min<0){
                    min = 0;
                }
                // 绘制图表
                myChart.setOption({
                    dataZoom: [{
                        show: true,
                    }, {
                        type: 'inside'
                    }],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['整车均价']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: inquiryDate,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '整车均价',
                            axisLabel: {
                                formatter: '￥{value}'
                            },
                            min:min,
                            max:max,
                            splitNumber:8,
                        },
                    ],
                    series: [
                        {
                            name: '整车均价',
                            type: 'line',
                            smooth: true,
                            symbolSize: 10,   //设定实心点的大小
                            data: batchPrice,
                            itemStyle: {
                                normal: {
                                    //定义一个list，通过list获取颜色，
                                    color: '#1d9b00'
                                }
                            },
                        },
                    ]
                });
                this.loadingChart = false;
            },
            handleSearchList(){
                this.params.pageNum = 1;
                this.getListData();
            },

            handleSizeChange(val){
                this.params.pageNum = 1;
                this.params.pageSize = val;
                this.getListData();
            },
            handleCurrentChange(val){
                this.params.pageNum = val;
                this.getListData();
            },

          handleSearchList2(){
            this.$refs.paramsForm.validate((valid) => {
              if (valid) {
                this.params2.pageNum = 1;
                this.getGoodsReport();
                this.getListData2();
              }
            })

          },

          handleSizeChange2(val){
            this.params2.pageNum = 1;
            this.params2.pageSize = val;
            this.getListData2();
          },
          handleCurrentChange2(val){
            this.params2.pageNum = val;
            this.getListData2();
          },

          getListData2(){
            this.loading = true;
            this.params2.inquiryDate = this.params.inquiryDate;
            this.params2.goodsKingId = this.params.goodsKingId;
            this.params2.supplierId = this.params.supplierId;
            supplierInquiryList(this.params2).then(response => {
              this.list = response.list;
              this.count = response.count;
              this.loading= false;
            }).catch(()=>{
              this.loading = false;
            });

          },

        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
